<style>
    #esb-service-add {
        padding: 20px 25px 25px 0;
        margin: 0 0 2px 3px !important;
    }

</style>
<div class="layui-fluid" id="esb-service-add">
    <form class="layui-form" lay-filter="service-info-add-form" method="post" onsubmit="return false">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label febs-form-item-require">系统名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="spName" minlength="2" maxlength="16" lay-verify="required|range|spName"
                           autocomplete="off" placeholder="英文"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">系统简称</label>
                <div class="layui-input-inline">
                    <input type="text" name="spAlias" minlength="2" maxlength="12" lay-verify="spNameShort"
                           autocomplete="off" placeholder="中英都行"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label febs-form-item-require">服务名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" minlength="2" maxlength="16" lay-verify="required|name"
                           autocomplete="off" placeholder="英文"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">服务简称</label>
                <div class="layui-input-inline">
                    <input type="text" name="alias" minlength="2" maxlength="12" lay-verify="alias" autocomplete="off"
                           placeholder="中英都行"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label febs-form-item-require">服务版本</label>
                <div class="layui-input-inline">
                    <input type="text" name="version" minlength="2" maxlength="16" lay-verify="required|version"
                           autocomplete="off" placeholder="版本号"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label febs-form-item-require">负责人</label>
                <div class="layui-input-inline">
                    <input type="text" name="principal" lay-verify="required|principal" autocomplete="off"
                           placeholder=""
                           class="layui-input principal">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">服务协议</label>
                <div class="layui-input-block">
                    <input type="radio" lay-filter="protocol" name="protocol" value="HTTP" title="HTTP" checked="">
                    <input type="radio" lay-filter="protocol" name="protocol" value="WebService" title="WebService">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">服务标准</label>
                <div class="layui-input-block">
                    <input type="radio" name="standard" value="JSON" title="JSON" checked="">
                    <input type="radio" name="standard" value="XML" title="XML">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">服务描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" minlength="2" maxlength="64" lay-verify="description"
                       autocomplete="off" placeholder="api描述(64字内)"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">业务地址</label>
            <div class="layui-input-block business-http">
                <input type="text" name="businessPath" lay-verify="required|businessPath" autocomplete="off"
                       placeholder="api BaseUrl"
                       class="layui-input">
            </div>

            <div class="layui-input-block business-ws">
                <input type="text" name="businessPath" lay-verify="business-ws" autocomplete="off"
                       placeholder="*.wsdl 文件"
                       class="layui-input business-wsdl">
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label febs-form-item-require">接口名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="interfaceName" minlength="2" maxlength="32"
                           lay-verify="required|interfaceName" autocomplete="off"
                           placeholder="method"
                           class="layui-input http-interface">

                    <div class="layui-input-inline ws-interface-select febs-hide">
                        <select name="interfaceName" lay-filter="interfaceName" class="ws-select-option">
                        </select>
                    </div>
                </div>
            </div>


            <!--<div class="layui-inline" style="display: none;">-->
            <div class="layui-inline namespace-box">
                <label class="layui-form-label">NameSpace</label>
                <div class="layui-input-inline">
                    <input type="text" name="namespace" autocomplete="off" placeholder="命名空间"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline req-method-box">
                <label class="layui-form-label">请求方式</label>
                <div class="layui-input-block">
                    <select name="method" lay-filter="aihao">
                        <option value="GET" selected="">GET</option>
                        <option value="POST">POST</option>
                        <option value="PUT" disabled>PUT</option>
                        <option value="DELETE" disabled>DELETE</option>
                    </select>
                </div>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">请求参数</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="params" name="params" data-th-value="[]"
                       placeholder="request param"
                       class="layui-input parameter">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">ESB地址</label>
            <div class="layui-input-block">
                <input type="text" name="bindEsbPath" lay-verify="bindEsbPath" autocomplete="off" placeholder="ESB地址"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">服务类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="0" title="原子" checked="">
                    <input type="radio" name="type" value="1" title="组合" disabled="">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">服务状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="0" title="注册" checked="">
                    <input type="radio" name="status" value="1" title="审核" disabled="">
                    <input type="radio" name="status" value="2" title="可用" disabled="">
                    <input type="radio" name="status" value="3" title="禁用" disabled="">
                </div>
            </div>
        </div>

        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="service-info-add-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>

    </form>
</div>

<script>
    //  https://www.open-open.com/code/view/1430625516632
    layui.use(['febs', 'form'], function () {
        var $ = layui.$,
            febs = layui.febs,
            form = layui.form,
            wsSelectOpt = $('.ws-select-option'),
            formRepeat = false;// 表单重复提交 出此下策
        form.render();

        $('.namespace-box').hide();
        $('.ws-interface-select').hide();
        $('.business-ws').hide();

        $('.principal').val(currentUser.username);

        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            },
            name: [/^\w+$/, '数字字母下划线组成'],
            spName: [/^\w+$/, '数字字母下划线组成'],
            businessPath: [/^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i, '地址格式有误'],
        });

        $('.parameter').focus(function () {
            var ts = $(this);
            var message = ts.val();
            message = (message == '') ? '[]' : message;
            console.log(message);
            var params = JSON.parse(message);
            console.log(params);
            febs.modal.view('添加参数', 'serviceInfo/addParameter', {
                data: {
                    paramJson: message
                },
                btn: ['添加', '删除', '确认'],
                btn1: function (index, layero) {
                    var par_txt = $(layero).find(".parameter-text"),
                        name = $(layero).find("input[name]"),
                        type = $(layero).find(".parameter-select option:selected").val();
                    if (name.val() == '') {
                        layer.tips('参数不能为空', name);
                        return false;
                    }
                    params.push({name: name.val(), type: type});
                    var str = JSON.stringify(params);
                    par_txt.val(str);
                    ts.val(str);
                    $(name).val("");
                    return false;
                },
                btn2: function (index, layero) {
                    if (params.length > 0) {
                        params.pop();
                        var str = JSON.stringify(params);
                        $(layero).find(".parameter-text").val(str);
                        ts.val(str);
                    }
                    return false;
                },
                success: function (intdex, layero) {
                    return false;
                }
            });
        });

        $('.business-wsdl').blur(function () {
            var _this = $(this),
                wsdl = _this.val(),
                reg = /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i;
            if (reg.test(wsdl) && wsdl.endWith("wsdl")) {
//                console.log("------  business-wsdl  ------" + wsdl);
                febs.get(ctx + 'serviceInfo/wsMethods', {wsdlUri: wsdl}, function (r) {
                    console.log("--dd--")
                    console.log(r.data)
                    $(wsSelectOpt).html("");
                    var d = r.data, len = d.length, method, nameSpace, param;
                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            method += '<option ns="' + d[i].targetNamespace + '" params="' + d[i].paramNames + '" >' + d[i].methodName + '</option>';
                            nameSpace = d[i].targetNamespace;// 哎
                            param = d[i].paramNames;// 哎
                        }
                    }
//                    console.log(param);
                    $(wsSelectOpt).append(method);
                    $(':input[name=namespace]').val(nameSpace);
                    $(':input[name=params]').val(param);
                    form.render();
                })
            } else {
                febs.alert.warn('地址格式有误');
            }
        })

        String.prototype.endWith = function (endStr) {
            var d = this.length - endStr.length;
            return (d >= 0 && this.lastIndexOf(endStr) == d)
        }

        form.on('radio(protocol)', function (data) {
            if (data.value == 'HTTP') {//
                $('.req-method-box').show();
                $('.http-interface').show();
                $('.business-http').show();
                $('.business-ws').hide();
                $('.namespace-box').hide();
                $('.ws-interface-select').hide();
            } else if (data.value == 'WebService') {  //
                $('.req-method-box').hide();
                $('.http-interface').hide();
                $('.business-http').hide();
                $('.business-ws').show();
                $('.namespace-box').show();
                $('.ws-interface-select').show();
            }
        });

        /* 监听提交 */
        form.on('submit(service-info-add-form-submit)', function (data) {
            if (formRepeat) {
                formRepeat = false;
                return false;
            } else {
                formRepeat = true;
                febs.post(ctx + 'serviceInfo/add', data.field, function () {
                    layer.closeAll();
                    febs.alert.success('添加成功');
                    $('#febs-service-info').find('#query').click();
                });
            }
            return false;
        });

    });
</script>